import { ref, reactive } from 'vue'
import app from '@/app'

import base from '@/app/model'

// 继承总模型
const model = new base;

// 视图
model.view = ref({})

// 配置
model.data = reactive({
  page_width: 213,
  page_height: 380,
  page_margin: 10,
  page_grid: true,
  label_width: 5,
  label_height: 13,
  label_start: 1,
  label_count: 65,
  name: '',
  name_size: 12,
  name_weight: false,
  name_italic: false,
  name_x: 5,
  name_y: 15,
  code: '',
  code_type: 'CODE128',
  code_x: 5,
  code_y: 15,
  code_width: 1,
  code_height: 20,
  code_size: 12,
  code_font: 'monospace',
  code_zoom: 90,
  code_margin: 0,
  price: app.money(0),
  price_size: 15,
  price_x: 5,
  price_y: 70,
  price_weight: true,
  price_italic: false,
})

model.load = data => {
  model.data.name = data.name
  model.data.price = app.money(data.price)
  model.data.code = data.code
  app.route.to('/plugin/goods/label')
}

// mm转pt
model.mmToPt = mm => {
  return app.math.factory(mm).div(0.35277777777777775).formatSmall()
}

// 生成text标签
model.buildSvgText = () => {
  const x = 'x="' + model.data.name_x + '" '
  const y = 'y="' + model.data.name_y + '" '
  const size = 'font-size="' + model.data.name_size + '" '
  const weight = model.data.name_weight ? 'font-weight="bold" ' : ''
  const italic = model.data.name_italic ? 'font-style="italic" ' : ''
  return '<text ' + x + y + size + weight + italic +'>' + model.data.name + '</text>'
}

// 生成条码标签
model.buildSvgBarCode = () => {
  if(!model.data.code) {
    return ''
  }
  const barcode = app.barcode(model.data.code, { 
    format: model.data.code_type, 
    width: model.data.code_width, 
    height: model.data.code_height,
    fontSize: model.data.code_size,
    font: model.data.code_font,
    textMargin: model.data.code_margin,
    flat: true 
  })

  const x = 'x="' + model.data.code_x + '" '
  const y = 'y="' + model.data.code_y + '" '
  const zoom = 'width="' + model.data.code_zoom + '%" '

  return '<image ' + x + y + zoom + ' href="' + barcode + '"/>'
}

// 生成price标签
model.buildSvgPrice = () => {
  const x = 'x="' + model.data.price_x + '" '
  const y = 'y="' + model.data.price_y + '" '
  const size = 'font-size="' + model.data.price_size + '" '
  const weight = model.data.price_weight ? 'font-weight="bold" ' : ''
  const italic = model.data.price_italic ? 'font-style="italic" ' : ''
  return '<text ' + x + y + size + weight + italic +'>' + model.data.price + '</text>'
}

// 生成网格标签
model.buildSvgGrid = () => {
  if(!model.data.page_grid) {
    return ''
  }

  return '<rect x="0" y="0" width="100%" height="100%" stroke-width="1" stroke="rgba(0, 0, 0, .2)" stroke-dasharray="5,5" fill="rgba(0, 0, 0, 0)" />'
}

// 生成标签
model.buildSvg = (empty = false) => {
  return '<svg>' + model.buildSvgGrid() + (!empty ? (model.buildSvgBarCode() + model.buildSvgText() + model.buildSvgPrice()): '') + '</svg>'
}

// 生成列
model.buildColumns = () => {
  // 生成标签
  const labelSvg = model.buildSvg()
  // 空标签
  const labelEmpty = model.buildSvg(true)
  // 计算列数
  const labelWidth = model.mmToPt((model.data.page_width - (model.data.page_margin * 2)) / model.data.label_width)
  // 计算行数
  const labelHeight = model.mmToPt((model.data.page_height - (model.data.page_margin * 2)) / model.data.label_height)
  // 标签起始
  const labelStart = Number(model.data.label_start - 1)
  // 标签数量
  const labelCount = Number(model.data.label_count) + labelStart
  
  // 列
  const columns = []
  
  // 循环空列
  for (let i = 0; i < model.data.label_width; i++) {
    columns.push([])
  }

  // 循环插入行
  for (let i = 0; i < labelCount; i++) {
    // 如果起始位大于当前位就使用空标签
    const svg = labelStart > i ? labelEmpty : labelSvg
    // 平均插入列中
    columns[i % columns.length].push({
      svg: svg,
      width: labelWidth,
      height: labelHeight
    })
  }

  return columns
}

// 生成视图
model.buildView = () => {
  model.view.value = {
    pageSize: {
      width: model.mmToPt(model.data.page_width),
      height: model.mmToPt(model.data.page_height),
    },
    pageMargins: model.mmToPt(model.data.page_margin),
    pageOrientation: model.data.page_direction,
    images: {
    },
    content: [{
      columns: model.buildColumns()
    }]
  }
}

export default model